<template>
	<view class="login-content plr40" :style="'background: url('+loginBgi+');background-size: 100% 100%;'">
		<view class="login-title">欢迎登录</view>
		<view class="login-box plr20 pt40">
			<view class="login-top">
				<image src="../../static/LoginLogo.png" class="login-top-img"></image>
				<view class="login-top-title">安全生产风险管控平台</view>
			</view>
			<view class="login-bottom">
				<view class="flex mtb20 plr20 ptb30 inputBox">
					<image src="../../static/iconUser.png" style="width: 32rpx;height: 32rpx;margin-top: 6rpx;"></image>
					<input v-model="user.userName" placeholder="请输入登录账号" class="ml20"></input>
				</view>
				<view class="flex mb40 plr20 ptb30 inputBox">
					<image src="../../static/iconPassword.png" @click="hSpassW" style="width: 32rpx;height: 32rpx;margin-top: 6rpx;">
					</image>
					<input v-model="user.passWord" placeholder="请输入登录密码" class="ml20 input1" :type="showPassword"></input>
				</view>
				<view class="textColor" @click="show = true">忘记密码？</view>
				<view class="button" @click="login">登录</view>
			</view>
		</view>
		<!-- 忘记密码弹出层 -->
		<u-overlay :show="show">
			<view class="warp">
				<view class="rect">
					<view>请联系运维人员！</view>
					<view style="display: flex;padding: 80rpx 40rpx;box-sizing: border-box;">
						<view
							style="width: 50%;height: 70rpx;line-height:70rpx;background-color: #F5F5F5;color: #65717D;margin-right: 36rpx;border-radius: 14rpx;"
							@click="show = false">取消</view>
						<view
							style="width: 50%;height: 70rpx;line-height:70rpx;background-color: #3473F9;color: #FFFFFF;border-radius: 14rpx;"
							@click="show = false">确认</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {loginBgi} from '../../pagesA/base64Img.js'
	export default {
		data() {
			return {
				loginBgi,
				showPassword:'password',
				user: {
					userName: '',
					passWord: 'Gcsoft123!'
				},
				show: false
			}
		},
		methods: {
			hSpassW(){
				this.showPassword = this.showPassword=='password'?'':'password'
			},
			login() {
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
				let that = this
				let params = {
					username: that.user.userName,
					password: that.user.passWord
				}
				that.request(that.$api.login, params,'POST').then((res) => {
					if (res) {
						let token = res.resultValue
						// 保存token
						uni.setStorageSync('token', token)
						// 调用获取用户基础信息
						this.getUserInfo()
					}
				})
			},
			getUserInfo() {
				let that = this
				that.request(that.$api.getBaseUserInfo,"GET").then((res) => {
					if(res) {
						let userInfo = res.resultValue
						// 保存用户信息
						uni.setStorageSync('userInfo', userInfo)
						
						//跳转主页
						uni.switchTab({
							url:'../index/index'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.input1{
		border: none!important;
		background-color: #F5F7FB!important;
	}
	.login-content {
		height: 100vh;
		overflow: auto;
	}

	.login-title {
		color: #fff;
		font-size: 40rpx;
		padding-top: 200rpx;
		font-family: PingFangSC-Medium;
		font-weight: Medium;
	}

	.login-box {
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		box-sizing: border-box;
	}

	.login-top {
		text-align: center;
		box-sizing: border-box;
	}

	.login-top-img {
		padding: 0 80rpx;
		width: 100%;
		height: 70rpx;
		margin: 40rpx 0 56rpx 0;
		box-sizing: border-box;
	}

	.login-top-title {
		font-size: 38rpx;
		color: #414A53;
		font-family: PingFangSC-Medium;
		font-weight: 600;
	}

	.inputBox {
		border-radius: 20rpx;
		background-color: #F5F7FB;
	}

	.login-bottom {
		margin-top: 40rpx;
		padding: 60rpx 20rpx 108rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.button {
		color: #FFFFFF;
		text-align: center;
		height: 96rpx;
		line-height: 96rpx;
		background: #3473F9;
		border-radius: 10px;
		box-sizing: border-box;
		box-shadow: 0rpx 40rpx 40rpx -40rpx #99B9FC;
	}

	.textColor {
		font-family: PingFangSC-Regular;
		font-weight: Regular;
		font-size: 28rpx;
		color: #9DAEBE;
		margin-bottom: 100rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;
		height: 100%;
	}

	.rect {
		width: 60%;
		/* width: 120px; */
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #fff;
		text-align: center;
		padding: 60rpx 0;
		box-sizing: border-box;
		color: #65717D;
		font-size: 32rpx;
	}
	.ml20 {
		width: 100%;
	}
</style>
